<template>
<!-- 指标明细 -->
  <div class="wise-integral-detail">
    <div class="search">
      <van-search left-icon="search" v-model="searchkey" :clearable="false" placeholder="请输入手机号/产品名" @search="handleSearch" />
    </div>
    <van-list
      v-model="loading"
      loading-text="加载中"
      :finished="finished"
      finished-text="没有更多了"
      @load="onload"
    >
      <div class="detail-info" v-for="(item,index) in list" :key="index">
        <div>
          <div>
            <span class="info-name" v-if="item.DEVICE_NUMBER">{{ item.DEVICE_NUMBER }}</span>
            <span class="info-flag" v-if="item.INNET_DATE">{{ item.INNET_DATE }}</span>
          </div>
          <div style="padding: 4px 0;">
            <span class="info-desc">积分：</span>
            <span class="item-value">{{ item.DEV_JF }}</span>
          </div>
          <div style="padding: 4px 0;" v-if="jfType == 'SCO_GSM_DEV' || jfType == 'SCO_GSM_DEV_M'">
            <span class="info-desc">是否融合：</span>
            <span class="item-value">{{ item.IS_COMP_MAIN }}</span>
          </div>
          <div class="info-tc">
            <div class="info-desc" style="flex: 1">产品：{{ item.PRODUCT_NAME }}</div>
            <div class="info-fee">
              <span class="info-desc">套餐费：</span>
              <span class="item-value">{{ item.DINNER_FEE }}</span>
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { dayKpiDetail, monthKpiDetail } from '@/api/publicline/wise.js'

export default {
  components: { },
  data() {
    return {
      type: '',
      jfType: '',
      time: '',
      loginId: '',
      searchkey: '',
      queryParams: {
        pageNum: 1,
        pageSize: 15
      },
      loading: false,
      finished: false,
      list: [],
      urlPath: {
        day: dayKpiDetail,
        month: monthKpiDetail,
      }
    }
  },
  created() {
    this.time = this.$route.query.time
    this.loginId = this.$route.query.loginId
    this.type = this.$route.query.type
    this.jfType = this.$route.query.jfType
  },
  mounted() {
    this.loadData()
  },
  beforeDestroy() {
    Toast.clear()
  },
  methods: {
    handleSearch(val) {
      this.searchkey = val
      this.loadData(true)
    },
    async loadData(force) {
      // 改变搜索条件，重新查询
      if ( force ) {
        this.queryParams.pageNum = 1
        this.list = []
        this.finished = false
      }
      this.loading = true
      let params = {
        ...this.queryParams,
        searchkey: this.searchkey,
        jfType: this.jfType,
        loginId: this.loginId
      }
      if(this.type === 'day') {
        params = {
          ...params,
          dayId: this.time
        }
      }
      if(this.type === 'month') {
        params = {
          ...params,
          monthId: this.time
        }
      }
      const res = await this.urlPath[this.type](params)
      const { result, success } = res
      if(success) {
        this.loading = false
        if(result.list.length < this.queryParams.pageSize) {
          this.finished = true
          Toast({
            message: '已全部加载',
            duration: 500,
            position: 'bottom',
            forbidClick: 'true'
          });
        }
        this.list = this.list.concat(result.list)
        Toast.clear()
      }
    },
    onload() {
      this.loading = false
      if(this.finished === false) {
        Toast({
          type:'loading',
          duration: 0,
          message: '正在加载',
          position: 'bottom',
          forbidClick: 'true'
        })
        this.queryParams.pageNum = parseInt(this.queryParams.pageNum) + 1
        this.loadData()
      } else {
        Toast({
          message: '已全部加载',
          duration: 500,
          position: 'bottom',
          forbidClick: 'true'
        })
      }
    },
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/less/person.less';
.detail-info .info-tc {
  flex-wrap: wrap;
}
.search  > div {
  width: 100%;
}
.info-fee {
  width: 90px;
  text-align: right;
}
</style>